<template>
    <div class="page">
        <div class="table"  v-show="showTableList">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><i class="el-icon-menu"></i> 短语管理</el-breadcrumb-item>
                    <el-breadcrumb-item>短语列表</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!--工具条-->
            <el-col :span="24" class="toolbar">
                <el-form :inline="true">
                    <el-form-item>
                        <el-input v-model="like.value" placeholder="请输入短语名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-on:click="getList">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-on:click="addPhrase">添加新短语</el-button>
                    </el-form-item>
                </el-form>
            </el-col>

            <el-table :data="tableData" height="660" border style="width: 100%" :header-cell-style="overrideHeaderStyle">
                <template v-for="item in headObj">
                    <template v-if="item.fixed">
                        <el-table-column :prop="item.prop" :key="item.prop" :label="item.label" fixed align="center" :min-width="item.width" :formatter="timeFormatter">
                        </el-table-column>
                    </template>
                    <template v-else>
                        <el-table-column :prop="item.prop" :key="item.prop" :label="item.label" align="center" :min-width="item.width" :formatter="timeFormatter">
                        </el-table-column>
                    </template>
                </template>
                <el-table-column label="操作" align="center" min-width="150">
                    <template slot-scope="scope">
                        <el-button @click="handleEditClick(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="handleDeleteClick(scope.$index, scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
            		background
                  	@size-change="handleSizeChange"
                  	@current-change="handleCurrentChange"
                  	:current-page="currentPage"
                  	:page-sizes="[30,100,500,1000, 5000, 10000]"
                  	:page-size="pageNumb"
                  	layout="sizes, prev, pager, next"
                  	:total="totalNum">
                </el-pagination>
            </div>
        </div>
        <addPhrase :id="phraseId" v-if="showDialog" @closedialog="closeDialog" @refresh="getList"></addPhrase>
        <!-- <DeleteConfirm :data="deleteConfirmObj.data" v-if="deleteConfirmObj.showDeleteConfirmDialog" @close="closeDeleteConfirmDialog" @refresh="getList"></DeleteConfirm> -->
    </div>
</template>

<script>
import NProgress from "nprogress";
import api from "../../api/api";
import util from "../../common/util";
import AddPhrase from "./phrase/AddPhrase.vue";

export default {
  data() {
    return {
      headObj: [],
      phraseId: null,
      filters: [
        {
          type: "1",
          key: "status",
          value: 1
        }
      ],
      like: {
        key: "name",
        value: ""
      },
      showTableList: true,
      //添加或者编辑原子
      showDialog: false,
      currentPage: 1,
      pageNumb: 30,
      totalNum: 0,
      listLoading: false,
      tableData: []
    };
  },
  components: {
    AddPhrase
  },
  methods: {
    overrideHeaderStyle(){
        return {"background":'#eef1f6','color':'#1f2d3d'}
 	},
    closeDialog() {
      this.showDialog = false;
    },
    timeFormatter(row, column) {
      switch (column.property) {
        case "update_time":
          return util.formatDate.format(
            new Date(row[column.property]),
            "yyyy-MM-dd hh:mm:ss"
          );
        case "create_time":
          return util.formatDate.format(
            new Date(row[column.property]),
            "yyyy-MM-dd hh:mm:ss"
          );
        default:
          return row[column.property];
          break;
      }
    },
    handleSizeChange(val) {
      this.pageNumb = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },

    addPhrase() {
      this.phraseId = null;
      this.showDialog = true;
    },
    //获取原子列表
    getList() {
      let para = {
        currentPage: this.currentPage - 1,
        pageNumb: this.pageNumb,
        wheres: JSON.stringify(this.filters),
        like: JSON.stringify(this.like),
        order: "id",
        tableName: "phrase"
      };
      this.listLoading = true;
      NProgress.start();
      let that = this;
      api
        .getList(para)
        .then(res => {
          if (res.ret == 0) {
            that.totalNum = res.data.totleNumb;
            that.tableData = res.data.dataList;
            that.tableData.forEach(item => {
              	item.statusStr = item.status == 0 ? "无效" : "有效";
            });
            that.listLoading = false;
            NProgress.done();
          }
        })
        .catch(e => {
          that.$message({
            type: "error",
            message: "获取短语列表失败,请刷新重试"
          });
        });
    },
    handleEditClick(index, row) {
      this.phraseId = row.id;
      this.showDialog = true;
      //   this.dialogInfo.form = row;
      //   this.dialogInfo.dialogFormVisible = true;
    },
    handleDeleteClick(index, row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let id = row.id;
          api
            .delete({
              tableName: "phrase",
              id: id
            })
            .then(res => {
              if (res.ret == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getList();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  mounted() {
    this.headObj = [
      {
        prop: "id",
        label: "id",
        width: "80",
        fixed: false
      },
      {
        prop: "name",
        label: "短语名称",
        width: "150",
        fixed: false
      },
      {
        prop: "create_time",
        label: "添加时间",
        width: "200",
        fixed: false
      },
      {
        prop: "update_time",
        label: "更新时间",
        width: "200",
        fixed: false
      },
      {
        prop: "statusStr",
        label: "状态",
        width: "90",
        fixed: false
      }
    ];
    this.getList();
  }
};
</script>
